<script>
import { defineComponent } from "vue";

import * as echarts from "echarts";

export default defineComponent({
    data() {},
    methods: {
        init() {
            // 绘制图表
            this.myChart.setOption({
                title: {
                    text: " ",
                },
                tooltip: {},
                xAxis: {
                    data: [
                        "电视机",
                        "空调",
                        "洗衣机",
                        "电风扇",
                        "电脑",
                        "手机",
                    ],
                },
                yAxis: {},
                series: [
                    {
                        name: "销量",
                        type: "line",
                        data: [300, 1000, 450, 700, 1200, 2000],
                    },
                ],
            });
        },
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById("main"));
        // 绘制图表
        this.init();
    },
});
</script>

<template>
    <div>
        <h1>折线图表</h1>
        
        <div id="main"></div>
    </div>
</template>

<style lang="scss" scoped>
#main {
    height: 500px;
}
</style>
